<script setup>

import { useRouter } from 'vue-router'
//首先在setup中定义
const router = useRouter()



</script>

<template>
  <div class="qf-userinfo">
    <img src="@/assets/img/touxiang.png">
    <span @click="router.push('/login')">立即登录</span>

  </div>

  <van-cell center  title="电影订单" >
    <template #icon>
      <img src="@/assets/img/My_dingdan.png" alt="">
    </template>
    <!-- 使用 right-icon 插槽来自定义右侧图标 -->
    <template #right-icon>
      <van-icon name="arrow" class="arrow"/>
    </template>    
  </van-cell>

  <van-cell center title="组合红包" >
    <template #icon>
      <img src="@/assets/img/My_hongbao.png" alt="">
    </template>
    <!-- 使用 right-icon 插槽来自定义右侧图标 -->
    <template #right-icon>
      <van-icon name="arrow" class="arrow"/>
    </template>    
  </van-cell>

  <van-cell  center title="帮助与客服" >
    <template #icon>
      <img src="@/assets/img/My_kefu.png" alt="">
    </template>
    <!-- 使用 right-icon 插槽来自定义右侧图标 -->
    <template #right-icon>
      <van-icon name="arrow" class="arrow"/>
    </template>    
  </van-cell>

  <van-cell center title="设置" >
    <template #icon>
      <img src="@/assets/img/My_shezhi.png" alt="">
    </template>
    <!-- 使用 right-icon 插槽来自定义右侧图标 -->
    <template #right-icon>
      <van-icon name="arrow" class="arrow"/>
    </template>    
  </van-cell>
</template>

<style scoped lang="less">
.qf-userinfo {
  display: flex;
  align-items: center;
  width: 100%;
  height: 156px;
  background: url('@/assets/img/user.png');
  background-size: cover;
  background-position: 0 -45px;
  background-repeat: no-repeat;
  margin-bottom: 20px;
  img {
    height: 68px;
    width: 68px;
    margin-left: 15px;
    border-radius: 50%;
  }

  span {
    margin-left: 15px;
    color: white;
  }


}

.van-cell{
  img{
    width: 20px;
    height: 20px;
    margin-right: 20px;
  }
}
</style>